<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
        <!-- 引入vue文件-->
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="vue">
			<!--绑定add事件,触发后调用父组件get方法-->
			<child v-on:add='get'></child>
		</div>
	</body>
	<script type="application/javascript">
		Vue.component('child',Vue.extend({
			template:'<input type="button" @click="send" />',
			/*自定义组件data必须是一个函数,且返回json对象*/
			data:function(){
				return {
					msg:'我是子组件'
				}
			},
			methods:{
				send:function(){
					/*触发子组件的add事件,传递msg数据*/
					this.$emit('add',this.msg);
				}
			}
		}))
		new Vue({
			el:'#vue',
			data:{
				message:'我是父组件'
			},
			methods:{
				get:function(msg){
					alert(msg);
				}
			}
		})
	</script>
</html>
